<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>聊天室</title>
	<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<div class="main">
    <div class="m-head">
        <div class="head-img"><img src="image/1d0d104e.jpg" height="50px" width="50px" /><span id="user_id">1</span></div>
        <div class="head-title">聊天室频道：test， 聊天中。。。<img src="image/chat.png" height="40px" width="40px" /></div>
    </div>
    <div id="message_id" class="chat_content"></div>
    <form class="send-main" id="send-main">
        <input id="push_content" type="text" placeholder="请输入聊天内容" />
        <button onclick="sendMessage()" class="my-button">发送</button>
        <button onclick="closeWebsocket()" class="my-button close">关闭</button>
    </form>
</div>
</body>
<script type="text/javascript">
    var num = location.href.indexOf("id=");
    var id = 'default';
    if (num > 0) {
        id = decodeURI(location.href.substr(num + 3));
    }
    document.getElementById('push_content').focus();
    var websocket = null;
    // 当前浏览前是否支持websocket
    if ("WebSocket" in window) {
        var url = "ws://127.0.0.1:9876/ws_test/" + id;
        document.getElementById('user_id').innerHTML = id;
        websocket = new WebSocket(url);
        // 打开连接事件
        websocket.onopen = function(event) {
            document.getElementById('message_id').innerHTML += "<p class='chat_msg_center'>您已进入群聊<br/>";
        }
        // 关闭连接事件
        websocket.onclose = function(event) {
            document.getElementById('message_id').innerHTML += "<p class='chat_msg_center'>您已退出群聊<br/>";
        }
        // 接收到消息事件
        websocket.onmessage = function(event) {
            setMessage(event.data);
        }
        // 异常事件
        websocket.onerror = function(event) {
            document.getElementById('message_id').innerHTML += "<p class='chat_msg_center'>网络异常<br/>";
        }
        // 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        window.onbeforeunload = function() {
            closeWebsocket();
        }
    } else {
        alert("浏览器不支持websocket");
    }
    /**
     * 关闭websocket
     */
    function closeWebsocket() {
        // 3代表已经关闭
        if (3 !== websocket.readyState) {
            websocket.close();
        } else {
            document.getElementById('message_id').innerHTML += "<p class='chat_msg_center'>已经退出<br/>";
        }
    }
    /**
     * 将消息显示在网页上
     *
     * @param message
     */
    function setMessage(message) {
        let msgs = message.split("_^Ag5F_");
        if (msgs[0] === "C1L2I3E4N5T") {
            if (id === msgs[1]) {
                document.getElementById('message_id').innerHTML += "<p class='chat_msg_right'>" + msgs[2] + '<b> :我</b><br/>';
            } else {
                document.getElementById('message_id').innerHTML += "<p class='chat_msg_left'><b>" + msgs[1] + '：</b>' + msgs[2] +
                    '<br/>';
            }
        } else if (msgs[0] === "S1Y2S1T3E4M") {
            document.getElementById('message_id').innerHTML += "<p class='chat_msg_center'>" + msgs[1] + '<br/>';
        }
        let div = document.getElementById('message_id');
        div.scrollTop = div.scrollHeight;
    }
    /**
     * 发送消息
     */
    function sendMessage() {
        // 1代表正在连接
        if (1 === websocket.readyState) {
            var message = document.getElementById('push_content').value;
            websocket.send(message);
        } else {
            alert("websocket未连接");
        }
        document.getElementById('push_content').value = "";
        document.getElementById('push_content').focus();
    }
    /**
     * 表单不允许提交
     *
     * @return {boolean}
     */
    document.getElementById("send-main").onsubmit = function() {
        return false;
    };
</script>
</html>
